<template>
  <el-card shadow="never" :body-style="{ padding: '10px' }">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity" class="demo-form-inline">
          <el-form-item label="区域合伙人">
            <el-input v-model="params.entity.name" placeholder="区域合伙人名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
            <!--            <template v-if="urlName == 'admin'">-->
            <!--              <el-button type="primary" v-if="hasPermit('admin:add')" :icon="Plus" @click="addDialog">新增</el-button>-->
            <!--            </template>-->
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading" :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
      <!-- <el-table-column fixed type="selection" width="55" /> -->
      <el-table-column type="index" width="60" label="序号" align="center"/>
      <el-table-column prop="name" label="区域合伙人名称" show-overflow-tooltip/>
      <el-table-column prop="parentName" label="上级区域合伙人" show-overflow-tooltip/>
      <!--      <el-table-column prop="deptName" label="单位名称" show-overflow-tooltip/>-->
      <el-table-column prop="phone" label="手机号码" show-overflow-tooltip/>
      <el-table-column prop="promoCode" label="推广码" show-overflow-tooltip/>
      <el-table-column prop="adminLevelName" label="代理级别" show-overflow-tooltip>
        <template #default="scope">
          {{scope.row.adminLevel != 1? ( scope.row.adminLevelName) : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="upgradeLevel" label="区域合伙人等级" show-overflow-tooltip>
        <template #default="scope">
          {{scope.row.adminLevel == 1? ('L'+ scope.row.upgradeLevel) : ''}}
        </template>
      </el-table-column>
<!--      <el-table-column prop="upgradeTime" label="等级启用时间" show-overflow-tooltip/>-->

      <!--      <el-table-column prop="roleNames" label="角色" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="statusFlag" label="状态" width="120" show-overflow-tooltip>-->
      <!--        <template #default="scope">-->
      <!--          <el-tag v-if="scope.row.statusFlag == 0" class="ml-2" type="danger">停用</el-tag>-->
      <!--          <el-tag v-if="scope.row.statusFlag == 1" class="ml-2" type="success">启用</el-tag>-->
      <!--          <el-tag v-if="scope.row.statusFlag == 2" class="ml-2" type="info">备用</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
<!--      <el-table-column prop="ownerShopLastTime" label="最后推广商户时间" width="160" show-overflow-tooltip>-->
<!--        <template #default="scope">-->
<!--          {{ scope.row.ownerShopLastTime || '-' }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="auditStatus" label="审核状态" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.auditStatus == 0" class="ml-2" type="danger">待审核</el-tag>
          <el-tag v-if="scope.row.auditStatus == 1" class="ml-2" type="success">审核通过</el-tag>
          <el-tag v-if="scope.row.auditStatus == -1" class="ml-2" type="info">审核不通过</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createUser" label="创建人" width="120"/> -->
      <!-- <el-table-column prop="createTime" label="创建时间" width="120"/> -->
      <!-- <el-table-column prop="updateTime" label="修改时间" width="120"/> -->
      <el-table-column fixed="right" label="操作" width="260">
        <template #default="scope">
          <el-button v-if="userInfo.userType == 0" link type="danger" :icon="Delete" size="small"
                     @click="showDeleteDialog(scope.row.id)">删除
          </el-button>
          <el-button v-if="userInfo.userType == 0 || (scope.row.id == userInfo.id)" link type="primary" :icon="Edit"
                     size="small"
                     @click="editDialog(scope.row)">编辑
          </el-button>
          <el-button link type="primary" :icon="Edit" size="small"
                     @click="openDetail(scope.row)">详情
          </el-button>
          <el-button v-if="userInfo.userType == 0 && scope.row.auditStatus == 0" link type="primary" :icon="Edit"
                     size="small"
                     @click="examineVerifyOpen(scope.row)">审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

    <!-- 新增或者修改页面-->
<!--    <UserAddOrEdit @closeEditDialog="closeEditDialog" :addOrEditVisible="addOrEditVisible" :ruleForm="ruleForm"-->
<!--                   :addDataType="addDataType"></UserAddOrEdit>-->

    <YwAdminAddOrEdit @closeEditDialog="closeEditDialog" :addOrEditVisible="addOrEditVisible" :ruleForm="ruleForm"
                      :addDataType="addDataType"></YwAdminAddOrEdit>

    <!--    详情页-->
    <el-drawer v-model="drawer2" direction="rtl" size="80%" :with-header="false">
      <!--    <template #header>-->
      <!--      <h4>审核信息</h4>-->
      <!--    </template>-->
      <template #default>
        <el-tabs v-model="detailDrawerFlag" class="demo-tabs" @tab-click="detailTabsClick">
          <el-tab-pane label="基本信息" name="userInfoMsg">
            <el-card>
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
                       :size="formSize" status-icon>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="管理员名称" prop="username">
                      {{ ruleForm.username }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="头像" prop="url">
                      <el-image
                          style="width: 150px; height: 150px"
                          :src="ruleForm.url"
                          :zoom-rate="1.2"
                          :initial-index="0"
                          fit="cover"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="手机号码" prop="phone">
                      {{ ruleForm.phone }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--              <el-row>-->
                <!--                <el-col :span="24">-->
                <!--                  <el-form-item label="Email" prop="email">-->
                <!--                    <el-input v-model="ruleForm.email"/>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--              </el-row>-->

                <!--                <el-row>-->
                <!--                  <el-col :span="24">-->
                <!--                    <el-form-item label="个人名下商户数量" prop="ownerShopCount">-->
                <!--                      <el-input v-model="ruleForm.ownerShopCount"/>-->
                <!--                    </el-form-item>-->
                <!--                  </el-col>-->
                <!--                </el-row>-->
                <!--                <el-row>-->
                <!--                  <el-col :span="24">-->
                <!--                    <el-form-item label="团队名下商户数量" prop="groupShopCount">-->
                <!--                      <el-input v-model="ruleForm.groupShopCount"/>-->
                <!--                    </el-form-item>-->
                <!--                  </el-col>-->
                <!--                </el-row>-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="最后推广商户时间" prop="ownerShopLastTime">
                      {{ ruleForm.ownerShopLastTime }}
                      <!--                      <el-input v-model="ruleForm.ownerShopLastTime"/>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="角色" prop="roleNames">
                      {{ ruleForm.roleNames }}
                      <!--                      <el-input v-model="ruleForm.roleNames"/>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--              <el-row>-->
                <!--                <el-col :span="24">-->
                <!--                  <el-form-item label="状态" prop="statusFlag">-->
                <!--                    <el-radio-group v-model="ruleForm.statusFlag" class="ml-4">-->
                <!--                      <el-radio v-for="(status,index) in STATUS_LIST" :label=status.label size="large">-->
                <!--                        {{ status.text }}-->
                <!--                      </el-radio>-->
                <!--                    </el-radio-group>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--              </el-row>-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="加入时间" prop="createTime">
                      {{ ruleForm.createTime }}
                      <!--                      <el-input v-model="ruleForm.createTime"/>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                      {{ ruleForm.remark }}
                      <!--                      <el-input v-model="ruleForm.remark" type="textarea"/>-->
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <!--            <template #footer>-->
              <!--              <span class="dialog-footer">-->
              <!--                <el-button @click="closeEditDialog">关闭</el-button>-->
              <!--                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>-->
              <!--              </span>-->
              <!--            </template>-->
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="团队成员" name="groupCustomer">
            <span style="color: red">审核通过的人员才算团队成员</span>
            <el-table :data="groupTables"
                      style="width: 100%">
              <el-table-column type="index" width="60" label="序号" align="center"/>
              <el-table-column prop="name" label="区域合伙人名称" show-overflow-tooltip>
                <template #default="scope1">
                  <span v-if="ruleForm.id ==scope1.row.id" style="color: red">*</span>
                  {{ scope1.row.name || '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="parentName" label="上级区域合伙人" show-overflow-tooltip/>
              <!--      <el-table-column prop="deptName" label="单位名称" show-overflow-tooltip/>-->
              <el-table-column prop="phone" label="手机号码" show-overflow-tooltip/>
              <el-table-column prop="promoCode" label="推广码" show-overflow-tooltip/>
              <el-table-column prop="adminLevelName" label="代理级别" show-overflow-tooltip/>

              <!--      <el-table-column prop="roleNames" label="角色" show-overflow-tooltip/>-->
              <!--      <el-table-column prop="statusFlag" label="状态" width="120" show-overflow-tooltip>-->
              <!--        <template #default="scope">-->
              <!--          <el-tag v-if="scope.row.statusFlag == 0" class="ml-2" type="danger">停用</el-tag>-->
              <!--          <el-tag v-if="scope.row.statusFlag == 1" class="ml-2" type="success">启用</el-tag>-->
              <!--          <el-tag v-if="scope.row.statusFlag == 2" class="ml-2" type="info">备用</el-tag>-->
              <!--        </template>-->
              <!--      </el-table-column>-->
              <el-table-column prop="ownerShopLastTime" label="最后推广商户时间" width="160" show-overflow-tooltip>
                <template #default="scope1">
                  {{ scope1.row.ownerShopLastTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="auditStatus" label="审核状态" show-overflow-tooltip>
                <template #default="scope1">
                  <el-tag v-if="scope1.row.auditStatus == 0" class="ml-2" type="danger">待审核</el-tag>
                  <el-tag v-if="scope1.row.auditStatus == 1" class="ml-2" type="success">审核通过</el-tag>
                  <el-tag v-if="scope1.row.auditStatus == -1" class="ml-2" type="info">审核不通过</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="团队商户" name="third">
            <span style="color: red">审核通过的商户才算团队商户</span>
            <el-table :data="shopTables" style="width: 100%">
              <!--              <el-table-column prop="id" label="ID" show-overflow-tooltip/>-->
              <el-table-column prop="adminName" label="归属用户" show-overflow-tooltip>
                <template #default="scope1">
                  <span v-if="ruleForm.id == scope1.row.adminId" style="color: red">
                   * {{ scope1.row.adminName || '' }}
                  </span>
                  <span v-else>
                    {{ scope1.row.adminName || '' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="shopSourceName" label="商户来源" show-overflow-tooltip/>
              <el-table-column prop="poiName" label="归属门店名称" show-overflow-tooltip/>
              <el-table-column prop="address" label="门店地址" show-overflow-tooltip/>
              <el-table-column prop="latitude" label="维度" show-overflow-tooltip/>
              <el-table-column prop="longitude" label="经度" show-overflow-tooltip/>
              <el-table-column prop="accountName" label="归属账户" show-overflow-tooltip/>
              <el-table-column prop="examineVerifyName" label="审核状态" show-overflow-tooltip/>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="我的订单" name="fourth">
            <span style="color: red">商户审核通过产生的订单</span>
            <el-table :data="orderTables" style="width: 100%">
              <el-table-column prop="orderId" label="订单号" show-overflow-tooltip/>
              <!--              <el-table-column prop="accountId" label="账户信息" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="accountName" label="账户名称" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="poiId" label="门店ID" show-overflow-tooltip/>-->
              <el-table-column prop="poiName" label="门店名称" show-overflow-tooltip/>
              <el-table-column prop="adminName" label="归属用户" show-overflow-tooltip/>
              <!--              <el-table-column prop="num" label="商品数量" show-overflow-tooltip/>-->
              <!--              <el-table-column prop="productId" label="商品ID" show-overflow-tooltip/>-->
              <el-table-column prop="productName" label="商品名称" show-overflow-tooltip/>
              <el-table-column prop="orderTypeName" label="订单类型" show-overflow-tooltip/>
              <el-table-column prop="orderStatusName" label="订单状态" show-overflow-tooltip/>
              <!-- <el-table-column prop="originalAmount" label="订单原始金额" show-overflow-tooltip/>-->
              <el-table-column prop="receiptAmount" label="订单实收金额(核心)" width="100" show-overflow-tooltip/>
              <el-table-column prop="payTime" label="订单时间" show-overflow-tooltip/>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="closeDetail">关闭</el-button>
        </div>
      </template>
    </el-drawer>

    <!--    团队长审核-->
    <el-dialog
        v-model="examineVerifyVisible"
        title="审核区域合伙人"
        width="30%"
        align-center>
    <span>
       <el-input type="textarea" v-model="examineVerifyRemark"/>
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="examineVerifyNotPass">不通过</el-button>
        <el-button type="primary" @click="examineVerifyPass">通过</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElTree, ElMessageBox} from 'element-plus'
import {onMounted, reactive, ref, watch} from 'vue'
import {deleteAdminById, adminPage, adminExamineVerify, adminGroupTableTree} from "@/apis/http/system/AdminHttp"
import {Params} from "@/apis/model/common/common.interfaces"
import YwAdminAddOrEdit from './YwAdminAddOrEdit.vue'
import {Delete, Edit, Search, Share, Upload, Plus} from '@element-plus/icons-vue'
import {Admin} from "@/apis/model/system/AdminModel";
import {deptLoop} from "@/apis/http/system/DeptHttp";
import {Dept} from "@/apis/model/system/DeptModel";
import {hasPermit} from "@/util/common.util";
import router from "@/router";
import FormBusinessAndMarketTree from "@/components/form/FormBusinessAndMarketTree.vue";
import {RetailAdminShop} from "@/apis/model/shop/RetailAdminShopModel";
import {examineVerify} from "@/apis/http/shop/RetailAdminShopHttp";
import type {TabsPaneContext} from 'element-plus'

import {userStore} from "@/store";
import FormUpLoadImage from "@/components/form/FormUpLoadImage.vue";
import {adminShopTableTree} from "@/apis/http/shop/RetailShopHttp";
import {adminOrderTableTree} from "@/apis/http/order/RetailOrderHttp";

const store = userStore();
const userInfo = store.userInfo;

const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {
    userType: 1
  } as Admin
})

const ruleForm = ref<Admin>({} as Admin)
const urlName = ref('')
// AddOrEditVisible
const addOrEditVisible = ref(false)
// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');
const userOperaPermit = ref(false)

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true

  adminPage(params).then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {
    userType: 1
  } as Admin
  addDataType.value = 'add'
}

/**
 * 修改弹出页面
 */
const editDialog = (row: Admin) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteAdminById(id).then(res => {
          const code = res.code;
          if (code == 200) {
            ElMessage({
              message: '删除成功！',
              type: 'success',
            })
            initList();
          } else {
            ElMessage.error('删除失败！');
          }
        })
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
}

const multipleSelection = ref<Admin[]>([])
const handleSelectionChange = (val: Admin[]) => {
  multipleSelection.value = val
}

// 这个打印出来的是node
const businessMarketTreeClick = (e: any) => {
  params.entity.deptId = e.deptId;
  initList();
}

/**
 * 获取本地图
 * @param name // 文件名 如 doc.png
 * @returns {*|string}
 */
function getAssetsImages(name: string) {
  return new URL(`/src/assets/tree/${name}`, import.meta.url).href;
}

const examineVerifyVisible = ref(false)
const currentExamineVerify = ref({} as Admin)
const examineVerifyRemark = ref('')
/**
 * 审核信息
 * @param row
 */
const examineVerifyOpen = (row: Admin) => {
  examineVerifyVisible.value = true;
  currentExamineVerify.value = row;
  examineVerifyRemark.value = '';
}

const examineVerifyNotPass = () => {
  examineVerifyVisible.value = false;
  examineVerifyData(currentExamineVerify.value.id, -1, examineVerifyRemark.value)
}

const examineVerifyPass = () => {
  examineVerifyVisible.value = false;
  examineVerifyData(currentExamineVerify.value.id, 1, examineVerifyRemark.value)
}


const examineVerifyData = (_id: number, examineVer: number, _remark: string) => {
  adminExamineVerify({
    id: _id,
    auditStatus: examineVer,
    remark: _remark
  } as Admin).then(res => {
    ElMessage({
      type: 'success',
      message: `审核成功！`,
    })
    initList();
  }).catch(res => {
    ElMessage({
      type: 'error',
      message: `审核失败！`,
    })
  })
}


const drawer2 = ref(false)
const detailDrawerFlag = ref('userInfoMsg')
const groupTables = ref([])
const shopTables = ref([])
const orderTables = ref([])

const openDetail = (row: any) => {
  ruleForm.value = row;
  findGroupList(ruleForm.value.id);
  findShopList(ruleForm.value.id);
  findOrderList(ruleForm.value.id);
  drawer2.value = true
}

const closeDetail = () => {
  ruleForm.value = {} as Admin;
  drawer2.value = false
}

const detailTabsClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const findGroupList = (adminId: number) => {
  adminGroupTableTree(adminId).then(res => {
    groupTables.value = res.data;
  })
}

const findShopList = (adminId: number) => {
  adminShopTableTree(adminId).then(res => {
    shopTables.value = res.data;
  })
}

const findOrderList = (adminId: number) => {
  adminOrderTableTree(adminId).then(res => {
    orderTables.value = res.data;
  })
}

onMounted(() => {
  initList()
})
</script>

<style lang="scss" scoped></style>
